<template>
	<view>
		<u-dropdown-item :title="title">
			<view class="slot-content" style="background-color: #FFFFFF;">
				<view class="u-flex">
					<scroll-view scroll-with-animation scroll-y="true" style="height: 600rpx;background: #f1f1f1;">
						<view :class="current==index?'block':''" @click="select1(item,index)"
							v-for="(item,index) in list" :key="index" class="u-padding-20 u-flex-1 u-text-center"
							style="background: #f1f1f1;">
							{{item.workName}}
						</view>

					</scroll-view>
					<scroll-view scroll-with-animation scroll-y="true" style="height: 600rpx;">
						<view :class="item.change?'block':''" @click="select(item,index)"
							v-for="(item,index) in list[current].child" :key="index"
							class="u-padding-20 u-flex-1 u-text-center">
							{{item.workName}}
						</view>
					</scroll-view>


				</view>
				<view class=" u-flex u-row-around">
					<u-button :hair-line="false" type="info" class="u-flex-1 u-padding-20" @click="clear">清空
					</u-button>
					<u-button type="primary" class="u-flex-2 u-padding-20" @click="sure">确认(可多选)</u-button>
				</view>
			</view>
		</u-dropdown-item>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		props:{
			dropTitle: {
				type: [String, Number],
				default: ''
			},
		},
		
		data() {
			return {
				current: -1,
				list: [],

				title: "工种",
				ischeck: ''  //奇怪的装置 检测是一级还是二级
			}
		},
		watch:{
			dropTitle:{
			 immediate: true,
			 handler(v) {
				 if(v){
					 this.title=v;
				 }
				 
				 console.log(v,"v")
			 }
			 
			}
		},
	
		created() {
			
				
				
			this.$u.post('/index/work', {}).then(res => {
				
				res.unshift({workName:'全部工种',child:[],id:0})
				
				
				res.forEach(item => {
					item.change = false;
					item.child.forEach(item1 => {
						item1.change = false
					})
				})
				this.list = res;
				
				
			}).catch(err => {
				
			})
			
		
		},
		methods: {
			...mapMutations(['ROMOVE_CURRENT']),
			sure() {
				let arr = [];
				let list = JSON.parse(JSON.stringify(this.list));
				if(list[0].change){
					arr=[]
					this.$emit('Sjob',arr.join(','));
					return
				}
				try {
					list.forEach(item => {
						item.child.forEach(item1 => {
							if (item1.change) {
								arr.push(item1.id);
								if(arr.length==1){
									this.title=item1.workName;
								}else{
									this.title='工种'+arr.length
								}
								
								
							} else {
								if (!this.ischeck) {
									throw new Error("ending"); //报错，就跳出循环   
								}
							}
						})
					})
				} catch (e) {
					if (e.message == 'ending') {
						list.forEach(item => {
							if (item.change) {
							 arr.push(item.id)
							 this.title=item.workName;
							}
						})
					}
				}
				this.$emit('Sjob',arr.join(','));
				this.$forceUpdate()
			},
			select1(item, index) {
				this.ischeck = false;
				this.current = index;
				this.list.forEach(item => {
					item.change = false;
				})
				this.list[index].change = true;
				this.$forceUpdate()
			},
			clear() {
				this.current = -1;
				this.title = '工种';
				let list = this.list;
				list.forEach(item => {
					item.child.forEach(item1 => {
						item1.change = false;
					})
				})
				this.$forceUpdate()
				this.$emit('close');
				
				
				this.ROMOVE_CURRENT()
			},
			select(item, index) {
				this.ischeck = true;
				this.$set(this.list[this.current].child[index], 'change', !item.change);
				this.$forceUpdate()
			},
			closeDropdown() {
				this.title = '工种';
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.block {
		background: #fff;
		animation: myAnimation 0.2s linear forwards;
		color: #2B85E4;
	}


	@keyframes myAnimation {
		from {
			background: transparent;
		}

		to {
			background: #fff;
		}
	}
</style>
